<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">
        <!-- 新增按钮 -->
        <div class="newBox">
          <button class="bt wt-120" @click="handleBuild()">
            新增护理项目
          </button>
        </div>

        <t-tabel>
          <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
          <t-table row-key="index" :data="data" :columns="COLUMNS" :hover="true"
            :table-layout="false ? 'auto' : 'fixed'" :size="size" :show-header="true" cell-empty-content="-" resizable
            lazy-load>

            <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
            <!-- 自定义图片列 -->
            <template #image="{ row }">
              <div>
                <div class="tdesign-demo-image-viewer__base">
                  <t-image-viewer :images="[row.image]">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image">
                        <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                          <span>
                            <BrowseIcon size="1.4em" /> 预览
                          </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </div>
            </template>

            <!-- 自定义状态列 -->
            <!-- <template #status="{ row }">
              {{ row.status == 0 ? '禁用' : '启用' }}
            </template> -->

            <!-- 自定义操作列 -->
            <template #operator="{ row }">
              <div class="operateCon">
                <a class="btn-dl" :class="row.count ? 'disabled' : ''" @click="handleClickDelete(row)">删除</a>
                <a class="font-bt" :class="row.count ? 'disabled' : ''" @click="handleEdit(row)">编辑</a>
                <a class="delete" :class="row.count > 0 && row.status === 1
                  ? 'disabled btn-dl'
                  : row.status === 1
                    ? 'btn-dl'
                    : 'font-bt'
                  " @click="handleForbidden(row)">{{ row.status === 1 ? '禁用' : '启用' }}</a>
              </div>
            </template>

            <!-- 自定义价格列处理 -->
            <template #price="{ row }">
              {{ appendZero(row.price) ? row.price : row.price + '.00' }}
            </template>

          </t-table>
        </t-tabel>
        <!-- 分页组件 -->
        <t-pagination v-if="pagination.total > 10" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize"
          :total="pagination.total" @change="onChange" />
      </div>
    </div>
  </div>
</template>


<script lang="tsx" setup>
import { ref } from 'vue';
/* 表头数据 */
import { COLUMNS } from '@/pages/serve/plan/project/constants'
/* 分页组件相关 */
import { MessagePlugin, Pagination, PaginationProps, Row } from 'tdesign-vue-next';

/* 定义props接受父组件的值 */
defineProps({
  data: {
    type: Array,
    default: []
  },
  pagination: {
    type: Object,
    default: {}
  }
});
/* 定义emit属性 */
let emit = defineEmits(['onChange', 'handleBuild', 'handleEdit', 'handleClickDelete', 'handleForbidden']);

// 当前页和页码发生变化时触发的函数
const onChange: PaginationProps['onChange'] = (pageInfo) => {
  emit('onChange', pageInfo);
};

/* 控制表格行为的变量 */
const size = ref("medium");

/* 自动补零的方法 */
const appendZero = (money: number) => {
  // 对传入的 money 自动补小数位两个0，并返回值
  // return money.toFixed(2)

  if (String(money).indexOf('.') > -1) {
    return true
  }
  return false
}

//编辑   参数为一行数据
const handleEdit = (row) => {
  if (!row.count) { emit('handleEdit', row.id) }
}

/*  */
const handleBuild = () => {
  // 打开新增对话框
  // 子传父
  emit('handleBuild');
}


const handleForbidden = (row) => {
  if (!row.count) { emit('handleForbidden', row); }

}
const handleClickDelete = (row) => {
  if (!row.count) {
    // 删除
    emit('handleClickDelete', row)
  }
}
</script>
